<template>
  <div class="home">
    <div class="nav-wrapper">
      <nav class="navbar">
        <div class="nav-left">
          <img class="logo" src="../assets/image/1497934133.png" alt="logo" />
          <template v-for="item in navList">
            <router-link class="nav-item" :to="item.path" :key="item.id">{{item.name}}</router-link>
          </template>
        </div>
        <div class="nav-content" @click="search">
          <span class="search-input">垃圾分类</span>
          <button class="search-btn">搜索</button>
        </div>
        <div class="nav-right">
          <!-- <i class="el-icon-circle-plus add" ></i> -->
          <el-dropdown trigger="click">
            <img class="avatar" :src="$baseUrl + avatar" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user">
                <span @click="central">个人中心</span>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-tickets" >
                <span @click="toAddRecord">创建投递</span>
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button">
                <span @click="logout">登出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </nav>
    </div>
    <router-view />
    <div class="bottom">
      <img src="../assets/image/1497934133.png" />
      <p>CopyRight &copy;智慧垃圾分类系统</p>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from "vuex";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      searchVal: "",
      navList: [
        {
          id: 1,
          name: "首页",
          path: "/"
        },
        {
          id: 2,
          name: "新闻资讯",
          path: "/news"
        },
        {
          id: 3,
          name: "分类答题",
          path: "/questions"
        }
        // {
        //   id: 4,
        //   name: '联系我们',
        //   path: '/contact'
        // },
        // {
        //   id: 5,
        //   name: '个人中心',
        //   path: '/mine'
        // }
      ]
    };
  },
  computed: {
    ...mapState(["avatar"])
  },

  methods: {
    search() {
      this.$router.push('/search')
    },
    toAddRecord() {
      this.$router.push("/add-record");
    },
    logout() {
      this.$store.commit('REMOVE_TOKEN')
      this.$router.push('/login')
    },
    central() {
      this.$router.push('/about')
    }
  }
};
</script>
<style lang="less" scoped>
@import "../assets/style/home.less";
</style>
